// import React from "react";

// //1,引入App.css样式
// import './App.css'

// //2.引入Header文件
// import Header from './components/Header'
// //3.引入List文件
// import List from './components/List'

// export default function App() {

//     <div className="container">
//         <Header />
//         <List />
//     </div>
// }

import React from 'react'
import { Routes, Route, Navigate } from "react-router-dom"

import Login from './components/Login'
import Main from './components/Main'
import NotFound from './components/404'
import Home from './components/Main/Home'
import About from './components/Main/About'

export default function App() {
  return (
    <div className='outer'>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/main" element={<Main />} >
          <Route path="/main/home" element={<Home />} />
          <Route path="/main/about" element={<About />} />
        </Route>
        <Route path="/" element={<Navigate to="/login" />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

//React路由的配置
// 1.下载react-router-dom的包
//2.引入BrowserRouter路由器包住整个App
// 3.在你想展示路由的地方书写路由


//路由重定向
//1.新建一个404子组件文件夹代表失败的状态,引入这个文件
    // 这个时候我们进入页面就会显示页面丢失状态,但我们希望进入页面出现主页或登录页
// 2.所以我们可以用上Navigate组件, 他会根据to的地址进行重定向 (如果你访问path,我就把你重定向到to)


//二级路由
// 二级路由要在以及路由的里面
// 我们现在要在一级路由里面建两个二级路由Home & About,进行切换
// 我们需要用到<Outlet />组件